<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>北京科技报</title>
		<link href="css/common.css" rel="stylesheet">
		<link href="css/header.css" rel="stylesheet">
		<link href="css/footer.css" rel="stylesheet">
		<link href="css/detail.css" rel="stylesheet">
		<link href="css/bookstarp.css" rel="stylesheet">
		<link href="css/swiper.css" rel="stylesheet">
		<script src="js/swiper.js"></script>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="vue_det">
			<div class="header-box">
				<div class="header flex align-end">
					<div class="flex-one">
						<img class="header-logo" src="images/logoff.png" />
						<div class="font-12 color-ff">聚焦科学传播 弘扬科学精神</div>
					</div>
					<div class="header-search-btn">
						<img class="header-search" src="images/search.png" />
					</div>
				</div>
				<div class="padding-lr-12 bg-ff" style="height: 43px;line-height: 43px;">
					<span class="font-12">当前位置：</span>
					<span class="font-12">首页</span>
					<span class="font-12">＞</span>
					<span class="font-12">热点解读</span>
					<span class="font-12">＞</span>
					<span class="font-12 color-main">正文</span>
				</div>
				<div class="flex align-center bg-ff padding-lr-12">
					<div class="header-xian flex-one"></div>
					<div class="header-radius"></div>
				</div>
			</div>
			<div class="box margin-top-120">
				<div class="container">
					<div class="font-20 color-33 text-bold text-center">水下养鱼、水上发电！全球首座风渔融合浮式平台投产</div>
					<div class="font-12 margin-top-14" style="color: #6A6B6B;">
						<span>2024/05/01 18:28:38</span>
						<span class="margin-left-8">来源：科普中央厨房</span>
						<span class="margin-left-8">阅读量：212903</span>
					</div>
					<div class="text-html-box margin-top-24">
						<div v-html="123"></div>
					</div>
					<div class="margin-top-14">
						<div id='swiper-container'  class="swiper-container">
							<div class="swiper-wrapper">
								<div class="swiper-slide">
									<a href="">
										<img class="advert-img" src="images/app.png" alt="" />
									</a>
								</div>
								<div class="swiper-slide">
									<a href="">
										<img class="advert-img" src="images/app.png" alt="" />
									</a>
								</div>
								<!-- 更多 slide -->
							</div>
							<div  class="swiper-pagination"></div>
						</div>
					</div>
					<div class="margin-top-30">
						<div class="flex align-center justify-between">
							<div class="font-17 color-main text-bold">相关阅读</div>
							<a class="flex align-center" href="">
								<div class="font-13">更多</div>
								<img class="syou" src="images/syou.png" />
							</a>
						</div>
						<div class="flex align-center bg-ff margin-top-8">
							<div class="header-xian flex-one"></div>
							<div class="header-radius"></div>
						</div>
						<div class=" margin-top-14">
							<a href="">
								<div class="flex">
									<img class="content-left-img" src="images/app.png" />
									<div class="flex-one flex flex-column justify-between">
										<div class="font-15 text-cut-two margin-top-4">2024年“世界地球日”系列活动之“自然资源科普小讲师”</div>
										<div class="font-12 margin-bottom-4" style="color: #6A6B6B;">
											<span class="margin-right-10">2024/07/12</span>
											<span>科普中央厨房</span>
										</div>
									</div>
								</div>
							</a>
						</div>
						<div class=" margin-top-14">
							<a href="">
								<div class="flex">
									<img class="content-left-img" src="images/app.png" />
									<div class="flex-one flex flex-column justify-between">
										<div class="font-15 text-cut-two margin-top-4">2024年“世界地球日”系列活动之“自然资源科普小讲师”</div>
										<div class="font-12 margin-bottom-4" style="color: #6A6B6B;">
											<span class="margin-right-10">2024/07/12</span>
											<span>科普中央厨房</span>
										</div>
									</div>
								</div>
							</a>
						</div>
					</div>
					<div class="margin-top-30">
						<div class="flex align-center justify-between">
							<div class="font-17 color-main text-bold">推荐板块</div>
							<a class="flex align-center" href="">
								<div class="font-13">更多</div>
								<img class="syou" src="images/syou.png" />
							</a>
						</div>
						<div class="flex align-center bg-ff margin-top-8">
							<div class="header-xian flex-one"></div>
							<div class="header-radius"></div>
						</div>
						<div class="flex flex-wrap justify-between">
							<div class="margin-top-14" style="width: 48%;">
								<a href="">
									<img class="content-sm-img" src="images/app.png" />
									<div class="content-sm-word text-cut-two">提问科学家：争做辟谣小卫前多吃碳水化合物可争做辟谣小卫前多吃碳水化合物可</div>
								</a>
							</div>
							<div class="margin-top-14" style="width: 48%;">
								<a href="">
									<img class="content-sm-img" src="images/app.png" />
									<div class="content-sm-word text-cut-two">提问科学家：争做辟谣小卫前多吃碳水化合物可争做辟谣小卫前多吃碳水化合物可</div>
								</a>
							</div>
							<div class="margin-top-14" style="width: 48%;">
								<a href="">
									<img class="content-sm-img" src="images/app.png" />
									<div class="content-sm-word text-cut-two">提问科学家：争做辟谣小卫前多吃碳水化合物可争做辟谣小卫前多吃碳水化合物可</div>
								</a>
							</div>
						</div>
					</div>
					<div class="margin-top-30">
						<div id='swiper-container-two'  class="swiper-container">
							<div class="swiper-wrapper">
								<div class="swiper-slide">
									<a href="">
										<img class="advert-b-img" src="images/app.png" alt="" />
									</a>
								</div>
								<div class="swiper-slide">
									<a href="">
										<img class="advert-b-img" src="images/app.png" alt="" />
									</a>
								</div>
								<!-- 更多 slide -->
							</div>
							<div  class="swiper-pagination"></div>
						</div>
					</div>
				</div>
			</div>
			<div>
				<div class="footer-box">
					<div class="container">
						<div class="footer-top flex justify-between align-center">
							<a class="font-12 color-ff">关于我们</a>
							<div class="shu-line"></div>
							<a class="font-12 color-ff">服务协议</a>
							<div class="shu-line"></div>
							<a class="font-12 color-ff">隐私说明</a>
							<div class="shu-line"></div>
							<a class="font-12 color-ff">联系我们</a>
						</div>
						<div class="text-center color-ff font-12 margin-top-24">
							<div>Powered by 北京科技报</div>
							<div class="margin-top-4">1998-2024 © BK-Media Inc.京ICP备10002591号-5</div>
						</div>
						<div class="text-center color-ff font-12 margin-top-16">
							<div class="flex">
								<div class="flex-one text-right">订阅电话：400 0885 266</div>
								<div class="flex-one text-left margin-left-20">投稿邮箱：kejish@163.com</div>
							</div>
							<div class="margin-top-4">地址：北京朝阳区白家庄东里23号院</div>
						</div>
						<div class="margin-top-14">
							<div class="row">
								<img class="footer-img col-xs-4 col-sm-4" src="images/footer1.png" />
								<img class="footer-img col-xs-4 col-sm-4" src="images/footer2.png" />
								<img class="footer-img col-xs-4 col-sm-4" src="images/footer3.png" />
								<img class="footer-img col-xs-4 col-sm-4" src="images/footer4.png" />
								<img class="footer-img col-xs-4 col-sm-4" src="images/footer5.png" />
								<img class="footer-img col-xs-4 col-sm-4" src="images/footer6.png" />
							</div>
						</div>
					</div>
				</div>
				<div class="downlod-box">
					<div class="container">
						<div class="flex align-center">
							<img class="logo-img" src="images/app.png" />
							<div class="flex-one font-13 margin-lr-6">下载APP客户单体验更多服务</div>
							<div class="but">去下载</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

<script>
	var vm = new Vue({
		el: '#vue_det',
		data: {
			
		},
		mounted: function() {
			var mySwiper = new Swiper('#swiper-container', {
				speed: 600,
				loop: true,
				pagination: '.swiper-pagination',
				paginationClickable: true
			});
			var mySwiperTwo = new Swiper('#swiper-container-two', {
				speed: 600,
				loop: true,
				pagination: '.swiper-pagination',
				paginationClickable: true
			});
		},
		methods: {
			
		}
	})
</script>